<template>
  <div class="ljb-index">
    <div class="header">
      <header-searchljb></header-searchljb>
    </div>
    <div class="category-index">
      <div class="category">
        <div class="category-list">
          <ul>
            <router-link class="category-name" tag="li" v-for="(list, index) in dataList" :key="index" :to="''" :class="{active: cindex == index}" @click.native="handleClick(index)">
              {{ list.category_name }}
            </router-link>
          </ul>
        </div>
        <div class="category-content" v-for="(list, index) in dataList" v-if="showIndex == index" :key="index">
          <div class="image">
            <img :src="'http://img1.wangjiu.com/' + list.image_url" alt="">
          </div>
          <div v-if="list.child_categories[0]" class="park">
            <h2 class="title">{{ dataList[index].child_categories[0].category_name }}</h2>
            <div class="content">
              <ul>
                <router-link @click.native="printTagKey(list)" :to="{name: 'listindex', params: { id: list.pc_id, key: list.tag_key }}" tag="li" v-for="(list, index) in dataList[index].child_categories[0].child_categories" :key="index">
                  <div>
                    <img :src="'http://img1.wangjiu.com/' + list.image_url" alt="">
                    </div>
                  <p>{{ list.category_name }}</p>
                </router-link>
              </ul>
            </div>
          </div>
          <div v-if="list.child_categories[1]" class="district">
            <h2 class="title">{{ dataList[index].child_categories[1].category_name }}</h2>
            <div class="content">
              <ul>
                <router-link  @click.native="printTagKey(list)" :to="{name: 'listindex', params: { id: list.pc_id, key: list.tag_key }}" tag="li" v-for="(list, index) in dataList[index].child_categories[1].child_categories" :key="index">
                  {{ list.category_name }}
                </router-link>
              </ul>
            </div>
          </div>
          <div v-if="list.child_categories[2]" class="brand">
            <h2 class="title">{{ dataList[index].child_categories[2].category_name }}</h2>
            <div class="content">
              <ul>
                <router-link  @click.native="printTagKey(list)" :to="{name: 'listindex', params: { id: list.pc_id, key: list.tag_key }}" tag="li" v-for="(list, index) in dataList[index].child_categories[2].child_categories" :key="index">
                  {{ list.category_name }}
                </router-link>
              </ul>
            </div>
          </div>
          <div v-if="list.child_categories[3]" class="search">
            <h2 class="title">{{ dataList[index].child_categories[3].category_name }}</h2>
            <div class="content">
              <ul>
                <router-link  @click.native="printTagKey(list)" :to="{name: 'listindex', params: { id: list.pc_id, key: list.tag_key }}" tag="li" v-for="(list, index) in dataList[index].child_categories[3].child_categories" :key="index">
                  {{ list.category_name }}
                </router-link>
              </ul>
            </div>
          </div>
          <div v-if="list.child_categories[4]" class="price">
            <h2 class="title">{{ dataList[index].child_categories[4].category_name }}</h2>
            <div class="content">
              <ul>
                <router-link @click.native="printTagKey(list)" :to="{name: 'listindex', params: { id: list.pc_id, key: list.tag_key }}" tag="li" v-for="(list, index) in dataList[index].child_categories[4].child_categories" :key="index">
                  {{ list.category_name }}
                </router-link>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderSearchljb from './head-search.vue'
import Vue from "vue";
import VueResource from "vue-resource";
Vue.use(VueResource);
export default {
  data() {
    return {
      dataList: [],
      cindex: 0,
      showIndex: 0
    };
  },
  components: {
    HeaderSearchljb
  },
  methods: {
    printTagKey(list) {
      // console.log(`category_name: ${list.category_name}, tag_key: ${list.tag_key}`)
    },
    handleClick(i) {
      this.cindex = i;
      this.showIndex = i;
    }
  },
  mounted() {
    this.$http.jsonp("category/query/getProdCateList.jsonp").then(response => {
      const data = JSON.parse(response.bodyText).result;
      this.dataList = data;
    }).catch(err => console.log(err));
  }
};
</script>

<style lang="scss">
@import "../styles/yo/usage/core/reset.scss";
#app {
  .m_index {
    section {
      .ljb-index {
        padding-top: .35rem;
        height: 100%;
        @include flexbox();
        @include flex-direction(column);
        .category-index {
          height: 100%;
          @include flex();
          width: 100%;
          .category {
            font-family: "Microsoft YaHei";
            height: 100%;
            background: #f5f5f5;
            @include flexbox();
            .category-list {
              width: 24.8%;
              background: #fff;
              ul {
                li {
                  width: 0.79rem;
                  height: 0.59rem;
                  @include border(0 0 1px 0);
                  text-align: center;
                  line-height: 0.59rem;
                  font-size: 0.13rem;
                  color: #333 !important;
                  &.active {
                    color: #ca0915 !important;
                    background: #f5f5f5;
                  }
                }
              }
            }
            .category-content {
              overflow-y: scroll;
              @include flexbox();
              @include flex-direction(column);
              width: 75.2%;
              height: 100%;
              padding: 0 0 1.1rem 10px;
              background: #f5f5f5;
              .image {
                width: 2.26rem;
                height: 0.75rem;
                padding-top: 10px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .park {
                color: #666;
                width: 2.41rem;
                .title {
                  width: 100%;
                  height: 0.38rem;
                  padding-top: 0.17rem;
                  text-indent: 0.055rem;
                  color: #666;
                  font-size: 0.12rem;
                  font-weight: 500;
                }
                .content {
                  @include flexbox();
                  width: 100%;
                  background: #fff;
                  ul {
                    width: 100%;
                    height: 100%;
                    @include flex();
                    @include flexbox();
                    @include flex-wrap(wrap);
                    li {
                      width: 0.76rem;
                      height: 0.9rem;
                      div {
                        width: 0.4rem;
                        height: 0.4rem;
                        margin-top: 0.2rem;
                        margin-left: 0.18rem;
                        img {
                          width: 100%;
                          height: 100%;
                        }
                      }
                      p {
                        width: 0.7rem;
                        height: 0.31rem;
                        line-height: 0.31rem;
                        font-size: 0.11rem;
                        @include ellipsis(0.66rem);
                        text-align: center;
                        text-indent: 0.018rem;
                      }
                    }
                  }
                }
              }
              .district {
                color: #666;
                width: 2.41rem;
                .title {
                  width: 100%;
                  height: 0.38rem;
                  padding-top: 0.17rem;
                  text-indent: 0.055rem;
                  color: #666;
                  font-size: 0.12rem;
                  font-weight: 500;
                }
                .content {
                  @include flexbox();
                  width: 100%;
                  background: #fff;
                  ul {
                    width: 100%;
                    height: 100%;
                    @include flex();
                    @include flexbox();
                    @include flex-wrap(wrap);
                    li {
                      width: 0.76rem;
                      height: 0.38rem;
                      text-align: center;
                      line-height: 0.4rem;
                      font-size: 0.12rem;
                    }
                  }
                }
              }
              .brand {
                color: #666;
                width: 2.41rem;
                .title {
                  width: 100%;
                  height: 0.38rem;
                  padding-top: 0.17rem;
                  text-indent: 0.055rem;
                  color: #666;
                  font-size: 0.12rem;
                  font-weight: 500;
                }
                .content {
                  @include flexbox();
                  width: 100%;
                  background: #fff;
                  ul {
                    width: 100%;
                    height: 100%;
                    @include flex();
                    @include flexbox();
                    @include flex-wrap(wrap);
                    li {
                      width: 0.76rem;
                      height: 0.38rem;
                      text-align: center;
                      line-height: 0.4rem;
                      font-size: 0.12rem;
                    }
                  }
                }
              }
              .search {
                color: #666;
                width: 2.41rem;
                .title {
                  width: 100%;
                  height: 0.38rem;
                  padding-top: 0.17rem;
                  text-indent: 0.055rem;
                  color: #666;
                  font-size: 0.12rem;
                  font-weight: 500;
                }
                .content {
                  @include flexbox();
                  width: 100%;
                  background: #fff;
                  ul {
                    width: 100%;
                    height: 100%;
                    @include flex();
                    @include flexbox();
                    @include flex-wrap(wrap);
                    li {
                      width: 0.76rem;
                      height: 0.38rem;
                      text-align: center;
                      line-height: 0.4rem;
                      font-size: 0.12rem;
                    }
                  }
                }
              }
              .price {
                color: #666;
                width: 2.41rem;
                .title {
                  width: 100%;
                  height: 0.38rem;
                  padding-top: 0.17rem;
                  text-indent: 0.055rem;
                  color: #666;
                  font-size: 0.12rem;
                  font-weight: 500;
                }
                .content {
                  @include flexbox();
                  width: 100%;
                  background: #fff;
                  ul {
                    width: 100%;
                    height: 100%;
                    @include flex();
                    @include flexbox();
                    @include flex-wrap(wrap);
                    li {
                      width: 0.76rem;
                      height: 0.38rem;
                      text-align: center;
                      line-height: 0.4rem;
                      font-size: 0.12rem;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
